<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="page-view-size" content="1280*720">
  <link rel="stylesheet" href="styles/base.css?v=1">
  <title>熊猫部落-搜索</title>
  <style>
    body {
      position: absolute;
      margin: 0;
      padding: 0;
      width: 1280px;
      height: 720px;
      background: url(images/index-bg.jpg);
      background-color: transparent;
    }

    #main-0 {
      position: absolute;
      left: 50px;
      top: 60px;
    }

    #input-container {
      position: absolute;
      width: 300px;
      height: 58px;
      background: url(images/search-icon.png) left top;
      left: -4px;
      line-height: 58px;
      font-size: 24px;
      color: #fff;
      overflow: hidden;
      padding: 0 29px;
      text-align: center;
    }

    #input {
      overflow: hidden;
    }

    #keyboard {
      position: absolute;
      top: 90px;
    }

    #keyboard .item {
      position: absolute;
      color: #fff;
      width: 50px;
      height: 50px;
      line-height: 50px;
      font-size: 22px;
      text-align: center;
      background: url(images/search-icon.png) left -60px;
    }

    #keyboard .item.focus {
      background: url(images/search-icon.png) -60px -60px;
    }

    #keyboard #key-36,
    #keyboard #key-37 {
      width: 157px;
      height: 52px;
      background-position: left -120px;
      top: 380px !important;
    }

    #keyboard #key-36.focus,
    #keyboard #key-37.focus {
      background-position: left -180px;
    }

    #keyboard #key-37 {
      left: 193px !important;
    }

    #message {
      position: absolute;
      font-size: 18px;
      color: #fff;
      top: 570px;
      width: 400px;
    }

    #main-1 {
      position: absolute;
      left: 460px;
      top: 90px;
    }

    #main-1 .title {
      position: absolute;
      font-size: 24px;
      color: #fff;
      top: -50px;
      width: 300px;
    }

    #page {
      position: absolute;
      width: 300px;
      text-align: right;
      font-size: 18px;
      color: #fff;
      left: 460px;
      top: -40px;
    }

    #main-1 .item {
      position: absolute;
      width: 175px;
      height: 238px;
      background: url(images/loading-placeholder.png) repeat;
    }

    #main-1 .item img {
      display: block;
      width: 100%;
      height: 100%;
    }

    #main-1 .item-view {
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      color: #fff;
      overflow: hidden;
      position: relative;
    }

    #main-1 .item-text {
      line-height: 40px;
      height: 40px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      position: absolute;
    }

    #main-1-0,
    #main-1-1,
    #main-1-2,
    #main-1-3 {
      top: 0;
    }

    #main-1-4,
    #main-1-5,
    #main-1-6,
    #main-1-7 {
      top: 298px;
    }

    #main-1-0,
    #main-1-4 {
      left: 0;
    }

    #main-1-1,
    #main-1-5 {
      left: 195px;
    }

    #main-1-2,
    #main-1-6 {
      left: 390px;
    }

    #main-1-3,
    #main-1-7 {
      left: 585px;
    }

    .empty {
      font-size: 24px;
      color: #fff;
      width: 760px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  </style>
</head>

<body onload="init()" onunload="exit()">
  <div id="main-0">
    <div id="input-container">
      <div id="input"></div>
    </div>
    <div id="keyboard"></div>
    <div id="message">请输入内容的首字母,例如"熊猫"输入"XM"</div>
  </div>
  <div id="main-1">
    <div class="title" id="title">猜你喜欢</div>
    <div id="page">第<span class="color">1</span>页/共<span class="color">3</span>页</div>
    <div class="main-1-container" id="main-1-container"></div>
  </div>
  <div id="test"></div>
</body>
<script src="js/jquery.js"></script>
<script src="config/index.js?v=1"></script>
<script src="api/index.js?v=3"></script>
<script src="js/KeyEvent.js?v=12"></script>
<script src="js/event.js?v=12"></script>
<script src="js/utli.js?v=12"></script>
<script src="js/base.js"></script>

<script>
  var area = [{
    id: 'key-',
    index: 0
  }, {
    id: 'main-1-',
    index: 0
  }];
  var lists = null;
  var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U',
    'V', 'W', 'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '删除', '清空'
  ];
  var totalPage = -1;
  var item_num = 8;
  var input = '请输入内容的首字母';
  // var reg = /[A-Z0-9]/;

  // 获取url参数
  function getPreFocus() {
    var url = window.location.href;
    focusArea = parseInt(GY.getURLParameter("AREA", url) != "" ? GY.getURLParameter(
      "AREA", url) : 0);
    area[focusArea].index = parseInt(GY.getURLParameter("INDEX", url) != "" ? GY.getURLParameter(
      "INDEX", url) : 0);
    query = GY.getURLParameter("QUERY", url) != "" ? GY.getURLParameter(
      "QUERY", url) : '';
    page = parseInt(GY.getURLParameter("PAGE", url) != "" ? GY.getURLParameter(
      "PAGE", url) : 1)
  }

  function renderInput() {
    if (query == '') {
      input = '请输入内容的首字母';
      renderLike();
    } else {
      input = query;
      renderSearch();
    }
    $('#input').html(input);
  }

  function renderSearch() {
    lists = search({
      QUERY: query.toLocaleLowerCase(),
      STATION: page
    })

    $('#title').html('搜索结果');
    var html = ''
    if (lists.total > 0) {
      totalPage = Math.ceil(lists.total / item_num);
      $('#page').html('第<span class="color">' + page + '</span>页 / 共<span class="color">' + totalPage + '</span>页');
      for (var i = 0, l = lists.data.length; i < l; i++) {

        var freeHtml = '';
        if (lists.data[i].charge == 0) {
          freeHtml = '<img class="free" src="images/free.png" />'
        }
        html += '<div id="main-1-' + i + '" class="item item-focus">' + freeHtml +
          '<img src="' + lists.data[i].picture[0].picPath1 + '" alt="">' +
          '<div class="item-view">' +
          '<div class="item-text">' + lists.data[i].name + '</div>' +
          '</div>' +
          '</div>'
      }
    } else {
      $('#page').html('')
      html = '<div class="empty">没有查到"' + query + '"的节目</div>'
    }
    $('#main-1-container').html(html)
    onFocus()
  }


  function renderLike() {
    $('#title').html('猜你喜欢');
    var html = ''
    lists = getVodListByTypeId({
      TYPEID: TYPEIDS.LIKE,
      LENGTH: item_num,
      STATION: page
    })

    if (lists.total > 0) {
      totalPage = Math.ceil(lists.total / item_num);
      $('#page').html('第<span class="color">' + page + '</span>页 / 共<span class="color">' + totalPage + '</span>页');
      for (var i = 0, l = lists.data.length; i < l; i++) {
        var freeHtml = '';
        if (lists.data[i].charge == 0) {
          freeHtml = '<img class="free" src="images/free.png" />'
        }
        html += '<div id="main-1-' + i + '" class="item item-focus">' + freeHtml +
          '<img src="' + lists.data[i].picture[0].picPath1 + '" alt="">' +
          '<div class="item-view">' +
          '<div class="item-text">' + lists.data[i].name + '</div>' +
          '</div>' +
          '</div>'
      }
    } else {
      $('#page').html('');
    }
    $('#main-1-container').html(html)
    onFocus()
  }



  // 页面初始化
  function init() {
    getPreFocus();
    getLog({
      programId: '0',
      programName: '搜索页面',
      ctype: '1',
      account: USERID,
      usermac: MAC,
      platform: '1'
    })
    renderKeyboard();
    renderInput();

  }



  function renderKeyboard() {
    var html = '';
    var diff = 6;
    var w = 50 + 10;
    var h = 50 + 10;
    for (var i = 0, l = arr.length; i < l; i++) {
      var style = 'left:' + (i % diff) * w + 'px;top: ' + Math.floor(i / diff) * h + 'px';
      html += '<div id="key-' + i + '" class="item" style="' + style + '">' + arr[i] + '</div>'
    }
    $('#keyboard').html(html)
  }

  // 上键操作
  function keyUp() {
    var index = area[focusArea].index;
    switch (focusArea) {
      case 0:
        if (index >= 6) {
          freeFocus();
          if (index == 37) {
            area[focusArea].index = 34
          } else if (index == 36) {
            area[focusArea].index = 31
          } else {
            area[focusArea].index -= 6
          }
          onFocus()
        }
        break;
      case 1:
        if (index > 3) {
          freeFocus();
          area[focusArea].index -= 4;
          onFocus()
        } else {
          if (page > 1) {
            page--;
            area[1].index = item_num - 1;
            renderInput();
          }
        }
        break;
    }
  }

  // 下键操作
  function keyDown() {
    var index = area[focusArea].index;
    switch (focusArea) {
      case 0:
        freeFocus();
        if (index <= 29) {
          index += 6;
          if ($('#' + area[focusArea].id + index).length > 0) {
            area[focusArea].index += 6;
          }
        } else if (index == 30 || index == 31 || index == 32) {
          area[focusArea].index = 36
        } else if (index == 33 || index == 34 || index == 35) {
          area[focusArea].index = 37
        }
        onFocus()
        break;
      case 1:
        index += 4;
        if ($('#' + area[focusArea].id + index).length > 0) {
          freeFocus();
          area[focusArea].index += 4;
          onFocus()
        } else {
          if (page < totalPage) {
            page++;
            area[1].index = 0;
            renderInput();
          }
        }
        break;
    }
  }

  // 左键操作
  function keyLeft() {
    var index = area[focusArea].index;
    switch (focusArea) {
      case 0:
        freeFocus();
        if (index % 6 != 0) {
          area[focusArea].index--;
        } else {
          if (index >= 29) {
            focusArea = 1;
            area[focusArea].index = 4;
          } else {
            focusArea = 1;
            area[focusArea].index = 0;
          }
        }
        onFocus()
        break;
      case 1:
        if (index == 0) {
          freeFocus();
          focusArea = 0;
          area[focusArea].index = 11;
          onFocus()
        } else if (index == 4) {
          freeFocus();
          focusArea = 0;
          area[focusArea].index = 35;
          onFocus()
        } else {
          freeFocus();
          area[focusArea].index--;
          onFocus()
        }
        break;

    }
  }

  // 右键操作
  function keyRight() {
    var index = area[focusArea].index;
    switch (focusArea) {
      case 0:
        freeFocus();
        index++;
        if (index % 6 != 0 && $('#' + area[focusArea].id + index).length > 0) {
          area[focusArea].index++;
        } else {
          if ($('#main-1-container .item').length > 0) {
            if (index >= 29) {
              focusArea = 1;
              if ($('#main-1-4').length > 0) {
                area[focusArea].index = 4;
              } else {
                area[focusArea].index = 0;
              }
            } else {
              focusArea = 1;
              area[focusArea].index = 0;
            }
          }

        }
        onFocus()
        break;
      case 1:
        index++;
        if (index % 4 != 0 && $('#' + area[focusArea].id + index).length > 0) {
          freeFocus();
          area[focusArea].index++;
          onFocus()
        }
        break;
    }
  }

  // 回车键操作
  function keyEnter() {
    var index = area[focusArea].index;
    var form = PANDA_PATH + "search.html?AREA=" + focusArea + "&INDEX=" + area[focusArea].index + '&QUERY=' +
      query + '&PAGE=' + page;
    switch (focusArea) {
      case 0:
        if (index == 36) {
          if (input != '') {
            query = input = query.substring(0, query.length - 1);
          } else {
            input = '请输入内容的首字母'
            query = ''
          }
        } else if (index == 37) {
          query = ''
          input = '请输入内容的首字母'
        } else {
          input = query = query + arr[index];
        }
        page = 1;
        renderInput();
        break;
      case 1:
        programGoUrl(lists.data[index], form);
        // GY.addUrl(PANDA_PATH + 'vod-play.html?VODID=' + lists.data[index].ID, form);
        // window.location.href = PANDA_PATH + 'vod-play.html?VODID=' + lists.data[index].ID;
        break;
    }
  }

  // 返回键操作
  function keyBack() {
    isNeed = 0;
    GY.goback();
  }

  // 页面退出
  function exit() {

  }

  // 落焦
  function onFocus() {
    var eFocus = $('#' + area[focusArea].id + area[focusArea].index);
    eFocus.addClass('focus');
    starMarquee(eFocus)
  }

  // 失焦 
  function freeFocus() {
    var eFocus = $('#' + area[focusArea].id + area[focusArea].index);
    eFocus.removeClass('focus');
    stopMarquee(eFocus)
  }
</script>

</html>